import { message, Card, Tabs, Form, Button, Input, Space } from 'antd';
import axios from 'axios';
import { useState } from 'react';
import userModel from '../../model/userModel';
import './index.css'

export interface UserInfoType {
    username: string;
    password: string;
}

const { TabPane } = Tabs;

export default (props: any) => {
    const [activeKey, setActiveKey] = useState('1')

    const onFinishFailed = () => {
        message.error('请检查红色的错误提示');
    };

    const tabsOnChange = (activeKey: string) => {
        setActiveKey(activeKey);
    }

    // 注册
    const onFinish = async (info: UserInfoType) => {
        //查询用户名是否存在
        let { data: list } = await userModel.query({ username: info.username });
        if (list.length) {
            //    有数据
            message.info('该用户已经注册，请登录');
        } else {
            const data: any = await userModel.post({
                ...info,
                type: activeKey === '1' ? 'consumer' : 'merchant'
            })
            if (data.status === 201) {
                message.success('注册成功,请登录!')
                props.history.push("/");
            } else {
                message.error('注册失败,请重试!')
            }
        }
    }

    const goToLogin = () => {
        props.history.push("/");
    }



    return (
        <div className='warp'>
            <Card className='card' title='注册'>
                <Tabs defaultActiveKey={activeKey} type="card" onChange={tabsOnChange}>

                    {/* 登录 */}
                    <TabPane tab="普通用户" key="1">
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 16 }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="on"
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[{ required: true, message: '请输入2到10位英文字母和数字及下划线' },
                                { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}/, message: '请输入2到10位英文字母和数字及下划线' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入数字字母_$组成长度6到10位' },
                                { pattern: /^[a-z_$0-9]{3,10}$/i, message: '请输入数字字母_$组成长度6到10位' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Space>
                                    <Button type="primary" htmlType="submit">
                                        注册
                                    </Button>
                                    <Button type='link' onClick={goToLogin}>
                                        去登录
                                    </Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    </TabPane>

                    {/* 注册 */}
                    <TabPane tab="商家" key="2">
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 16 }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="on"
                        >
                            <Form.Item
                                label="商家名称"
                                name="username"
                                rules={[{ required: true, message: '请输入2到10位英文字母和数字及下划线' },
                                { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}/, message: '请输入2到10位英文字母和数字及下划线' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入数字字母_$组成长度6到10位' },
                                { pattern: /^[a-z_$0-9]{3,10}$/i, message: '请输入数字字母_$组成长度6到10位' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Space>
                                    <Button type="primary" htmlType="submit">
                                        注册
                                    </Button>
                                    <Button type='link' onClick={goToLogin}>
                                        去登录
                                    </Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    </TabPane>
                </Tabs>
            </Card>
        </div>
    );
};

